import React, { useState } from 'react';
import style from './index.less';
import { history } from 'umi';
import img from '../../../public/imgs/小头像.png';
import img1 from '../../../public/imgs/图标1.jpg';
import img2 from '../../../public/imgs/图标2.jpg';
import img3 from '../../../public/imgs/图标3.jpg';
import { Popup, Space, Button } from 'antd-mobile';
import icon1 from '../../../public/imgs/icon1.jpg';
import icon2 from '../../../public/imgs/icon2.jpg';
import icon3 from '../../../public/imgs/icon3.jpg';
import hb from '../../../public/imgs/红包.png';
import { MessageOutlined } from '@ant-design/icons';
import Login from '../Login';
// import { DemoBlock, lorem } from 'demos'
type Props = {};

const Me = (props: Props) => {
  const [visible1, setVisible1] = useState(false);
  return (
    <div className={style.mine}>
      <div className={style.bg}>
        <div className={style.mineheader}>
          <div className={style.icon}>
            <MessageOutlined />
          </div>
          <span>婚礼纪</span>
        </div>

        <div className={style.minetou}>
          <img src={img}></img>
          <p
            onClick={() => {
              setVisible1(true);
            }}
          >
            手机号一键登录
          </p>
          <Popup
            visible={visible1}
            onMaskClick={() => {
              setVisible1(false);
            }}
            bodyStyle={{
              height: '50vh',
              borderRadius: '0.25rem 0.25rem 0rem 0rem',
            }}
          >
            <Login />
          </Popup>
          <span>登录查看更多信息</span>
        </div>
      </div>

      <div className={style.minebtm}>
        <div className={style.minenav}>
          <ul>
            <li>
              <img src={img1}></img>
              <p>优惠劵</p>
            </li>
            <li>
              <img src={img2}></img>
              <p>我的收藏</p>
            </li>
            <li>
              <img src={img3}></img>
              <p>订单预约</p>
            </li>
          </ul>
        </div>

        <div className={style.minenav2}>
          <p>备婚工具</p>
          <ul>
            <li>
              <img src={icon1}></img>
              <p>电子请帖</p>
            </li>
            <li
              onClick={() => {
                history.push('/lucky');
              }}
            >
              <img src={icon2}></img>
              <p>婚礼吉日</p>
            </li>
            <li>
              <img src={icon3}></img>
              <p>婚礼现场</p>
            </li>
          </ul>
        </div>

        <div className={style.minenav3}>
          <img src={hb}></img>
        </div>
      </div>
    </div>
  );
};

export default Me;
